<template>
  <a-modal
    v-model:open="visible"
    :title="title"
    :destroyOnClose="true"
    :width="width"
    centered
    @cancel="close"
  >
    <div
      class="absolute top-13 left-0 w-full h-[1px] border-b-solid border-b-[1px] border-[#DADFE6] pt-3"
    ></div>
    <div class="pt-8">
      <slot></slot>
    </div>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
defineProps({
  title: {
    type: String,
    default: 'Basic Modal',
  },
  width: {
    type: Number,
    default: 500,
  },
})
const visible = ref<boolean>(false)

const open = () => {
  visible.value = true
}

const close = () => {
  visible.value = false
}
defineExpose({
  open,
  close,
})
</script>

<style scoped></style>
